<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="../../__/import.js"></script>
<title>用户管理</title>
<style type="text/css">
#vm {
	padding: 0px 0px;
}

.el-header {
	line-height: 50px;
}

.x-input {
	width: 150px;
}

.x-right {
	text-align: right;
}
</style>
</head>
<body>
	<div id="vm" v-cloak>
		<div is="el-container" style="height: 100%; border: 1px solid #eee; margin: 0 0;">
			<div is="el-aside" width="215px">
				<div is="el-container">
					<div is="el-header" height="40px"></div>
					<div is="el-main">
						<div is="el-tree" :data="organization.data" default-expand-all node-key="id" ref="tree" highlight-current :props="{children:'children',label:'name'}" @node-click="onClickOrganization"></div>
					</div>
				</div>
			</div>
			<div is="el-container">
				<div is="el-header" height="40px">
					<div is="el-row">
						<div is="el-col" :span="15">
							<button is="el-button" type="primary" icon="el-icon-plus" size="small" @click="onEdit({})">新增</button>
						</div>
						<div is="el-col" :span="9" class="x-right">
							<div is="el-tag" v-if="!!form.organizationName" closable @close="onRemoveSelectOrganization">{{form.organizationName}}</div>
							<input class="x-input" is="el-input" size="small" v-model="form.keyword" placeholder="搜索条件" clearable />
							<button is="el-button" size="small" type="success" icon="el-icon-search" @click="onSearch(false)">查询</button>
							<button is="el-button" size="small" type="success" icon="el-icon-search" @click="onSearch(true)">查询全部</button>
						</div>
					</div>
				</div>
				<div is="el-main">
					<div is="el-table" ref="table" :data="page.records" size="medium" border style="width: 100%" :height="uiTable.height">
						<div is="el-table-column" prop="username" label="账号" width="220"></div>
						<div is="el-table-column" prop="realname" label="姓名" show-overflow-tooltip></div>
						<div is="el-table-column" prop="sex" label="性别" width="60"></div>
						<div is="el-table-column" prop="enabled" label="状态" :formatter="formatEnabled" width="60"></div>
						<div is="el-table-column" prop="remark" label="备注" show-overflow-tooltip></div>
						<div is="el-table-column" label="操作" width="185">
							<div slot-scope="scope">
								<button is="el-button" type="text" size="mini" @click="onEdit(scope.row)">编辑</button>
								<span v-if="scope.row.id!='_admin'" style="margin-left: 5px;">
									<button is="el-button" type="text" v-if="scope.row.enabled=='0'" size="mini" @click="onEnable(scope.row,1)">启用</button>
									<button is="el-button" type="text" v-if="scope.row.enabled=='1'" size="mini" @click="onEnable(scope.row,0)">停用</button>
									<button is="el-button" type="text" size="mini" @click="onResetPassword(scope.row)">重置密码</button>
									<button is="el-button" type="text" size="mini" @click="onDelete(scope.row)">删除</button>
								</span>
							</div>
						</div>
					</div>
					<div class="pagination">
						<div is="el-pagination" @current-change="pagedQuery" :current-page="page.currentPage" :page-size="page.limit" layout="total,prev,pager,next,jumper" :total="page.total"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		new Vue({
			el : '#vm',
			data : {
				uiTable : {
					height : 100
				},
				form : {
					keyword : '',
					organizationId : '',
					organizationName : ''
				},
				organization : {
					data : []
				},
				page : {
					currentPage : 1,
					limit : 15,
					total : 0,
					records : [],
					filter : {
						keyword : '',
						organizationId : ''
					}
				}
			},
			created : function() {
				__.$vm = this;
			},
			mounted : function() {
				var vm = this;
				var resize = function() {
					vm.$nextTick(function() {
						vm.uiTable.height = Math.max(window.innerHeight - 130, 100);
					});
				};
				resize();
				window.addEventListener('resize', resize);

				__.mask();
				__.api('POST', '/rest/organization/getOrganizationTree', {}, function(result) {
					__.unmask();
					if (__.err(result)) {
						__.message({
							message : result.message,
							type : 'warning'
						});
						return;
					}
					vm.organization.data = result.data || [];
					vm.pagedQuery(1);
				});
			},
			methods : {
				formatEnabled : function(row, column, cellValue) {
					if (row.enabled == "0") {
						return "停用";
					} else if (row.enabled == "1") {
						return "启用";
					} else {
						return "未知状态";
					}
				},
				pagedQuery : function(currentPage) {
					var vm = this, page = vm.page;
					currentPage && (page.currentPage = currentPage);
					var params = __.toPagination(page.currentPage, page.limit);
					params.filter = vm.page.filter;
					__.mask();
					__.api('POST', '/rest/user/list', params, function(result) {
						__.unmask();
						if (__.err(result)) {
							__.message({
								message : result.message,
								type : 'warning'
							});
							return;
						}
						var page = result.data;
						vm.page.total = page.total | 0;
						vm.page.records = page.records;
					});
				},
				onClickOrganization : function(data) {
					var vm = this;
					vm.form.organizationId = data.id || '';
					vm.form.organizationName = data.name || '';
					vm.onSearch(false);
				},
				onRemoveSelectOrganization : function(data) {
					var vm = this;
					vm.form.organizationId = '';
					vm.form.organizationName = '';
					vm.onSearch(false);
				},
				onSearch : function(all) {
					var vm = this;
					vm.page.filter.keyword = __.trim(vm.form.keyword);
					vm.page.filter.organizationId = all ? '' : (vm.form.organizationId || '');
					vm.pagedQuery(1);
				},
				onEdit : function(record) {
					var vm = this;
					record = record || {};
					var params = {
						id : record.id
					};
					var vm = this;
					__.dialog.open({
						title : __.isEmpty(params.id) ? '新增用户' : '编辑用户',
						scope : 'self',
						fullscreen : true,
						url : __.url('/view/user/user-edit-dlg.html', params),
						close : function(result) {
							vm.pagedQuery();
						}
					});
				},
				onEnable : function(record, enabled) {
					var vm = this;
					var id = record.id;
					__.api('POST', '/rest/user/enableById', {
						id : id,
						enabled : enabled
					}, function(result) {
						if (!__.err(result)) {
							if (enabled == "1") {
								__.message({
									message : '启用成功！',
									type : 'success'
								});
							} else if (enabled == "0") {
								__.message({
									message : '停用成功！',
									type : 'warning'
								});
							}
							vm.pagedQuery();
						}
					});
				},
				onResetPassword : function(record) {
					var vm = this;
					__.confirm("确定要重置用户【" + record.realname + "】的密码？", "密码重置确认", {
						confirmButtonText : "确定",
						cancelButtonText : "取消",
						type : "warning"
					}).then(function() {
						var params = {};
						params.id = record.id;
						__.api('POST', '/rest/user/resetPasswordById', params, function(result) {
							if (__.err(result)) {
								__.message({
									message : result.message,
									type : 'warning'
								});
								return;
							}
							__.message({
								message : '重置成功！',
								type : 'success'
							});
						});
					});
				},
				onDelete : function(record) {
					var vm = this;
					__.confirm("确定要删除用户【" + record.realname + "】？", "删除确认", {
						confirmButtonText : "确定",
						cancelButtonText : "取消",
						type : "warning"
					}).then(function() {
						var params = {};
						params.id = record.id;
						__.api('POST', '/rest/user/deleteById', params, function(result) {
							if (__.err(result)) {
								__.message({
									message : result.message,
									type : 'warning'
								});
								return;
							}
							vm.pagedQuery();
							__.message({
								message : '删除成功！',
								type : 'success'
							});
						});
					});
				}
			}
		});
	</script>
</body>
</html>